<template>
  <div class="vip-page">
    <!-- 头部返回 -->
    <div class="header">
      <div class="back-btn" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
      </div>
      <div class="title">开通会员</div>
      <div class="placeholder"></div>
    </div>

    <!-- VIP选项列表 -->
    <div class="vip-options">
      <!-- 月度VIP -->
      <div class="vip-option" :class="{ selected: selectedPlan === 'monthly' }" @click="selectPlan('monthly')">
        <div class="option-left">月度VIP</div>
        <div class="option-right">
          <div class="price">¥68/月</div>
          <div class="original-price">原价¥99</div>
        </div>
        <div class="radio-btn" :class="{ selected: selectedPlan === 'monthly' }">
          <img v-if="selectedPlan === 'monthly'" src="../assets/xuanzhong.svg" alt="选中" class="selected-icon">
        </div>
      </div>

      <!-- 年度VIP (默认选中) -->
      <div class="vip-option" :class="{ selected: selectedPlan === 'yearly' }" @click="selectPlan('yearly')">
        <div class="option-left">年度VIP</div>
        <div class="option-right">
          <div class="price">¥99/年</div>
          <div class="original-price">原价¥299</div>
        </div>
        <div class="special-tag">
          <img src="../assets/tehui.svg" alt="限时特惠" class="special-icon">
        </div>
        <div class="radio-btn" :class="{ selected: selectedPlan === 'yearly' }">
          <img v-if="selectedPlan === 'yearly'" src="../assets/xuanzhong.svg" alt="选中" class="selected-icon">
        </div>
      </div>

      <!-- 永久VIP -->
      <div class="vip-option" :class="{ selected: selectedPlan === 'lifetime' }" @click="selectPlan('lifetime')">
        <div class="option-left">永久VIP</div>
        <div class="option-right">
          <div class="price">¥159/永久</div>
          <div class="original-price">原价¥599</div>
        </div>
        <div class="price-tag">
          <span>最具性价比</span>
        </div>
        <div class="radio-btn" :class="{ selected: selectedPlan === 'lifetime' }">
          <img v-if="selectedPlan === 'lifetime'" src="../assets/xuanzhong.svg" alt="选中" class="selected-icon">
        </div>
      </div>
    </div>

    <!-- 倒计时提示 -->
    <div class="countdown-notice">
      <span>距离恢复原价仅剩 {{ countdownTime }}</span>
    </div>

    <!-- VIP权益 -->
    <div class="vip-benefits">
      <div class="benefit-item">
        <div class="benefit-icon">
          <img src="../assets/no_ad.svg" alt="无广告播放">
        </div>
        <div class="benefit-text">无广告播放</div>
        <div class="benefit-desc">畅享无打扰体验</div>
      </div>
      <div class="benefit-item">
        <div class="benefit-icon">
          <img src="../assets/study.svg" alt="无限畅学">
        </div>
        <div class="benefit-text">无限畅学</div>
        <div class="benefit-desc">海量内容学习</div>
      </div>
      <div class="benefit-item">
        <div class="benefit-icon">
          <img src="../assets/gengxin.svg" alt="免费更新">
        </div>
        <div class="benefit-text">免费更新</div>
        <div class="benefit-desc">持续内容更新</div>
      </div>
      <div class="benefit-item">
        <div class="benefit-icon">
          <img src="../assets/kefu.svg" alt="专属客服">
        </div>
        <div class="benefit-text">专属客服</div>
        <div class="benefit-desc">贴心随时支持</div>
      </div>
    </div>

    <!-- 底部开通按钮 -->
    <div class="subscribe-button-container">
      <button class="subscribe-button" @click="handleSubscribe">立即开通</button>
      <div class="terms">开通即同意<a href="#">《会员服务协议》</a></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const props = defineProps({
  onClose: {
    type: Function,
    required: false
  }
})

const emit = defineEmits(['back'])

const router = useRouter()

// 选中的套餐
const selectedPlan = ref('lifetime') // 默认选中永久VIP

// 选择套餐
const selectPlan = (plan) => {
  selectedPlan.value = plan
}

// 倒计时
const countdownTime = ref('23:59:59')
let countdownTimer = null

// 开始倒计时
const startCountdown = () => {
  // 设置初始倒计时为24小时
  let hours = 23
  let minutes = 59
  let seconds = 59

  countdownTimer = setInterval(() => {
    seconds--
    if (seconds < 0) {
      seconds = 59
      minutes--
      if (minutes < 0) {
        minutes = 59
        hours--
        if (hours < 0) {
          clearInterval(countdownTimer)
          hours = minutes = seconds = 0
        }
      }
    }
    
    // 格式化时间
    const formattedHours = hours.toString().padStart(2, '0')
    const formattedMinutes = minutes.toString().padStart(2, '0')
    const formattedSeconds = seconds.toString().padStart(2, '0')
    
    countdownTime.value = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`
  }, 1000)
}

// 处理订阅
const handleSubscribe = () => {
  // 订阅成功提示
  ElMessage({
    message: selectedPlan.value === 'yearly' 
      ? '年度VIP开通成功！' 
      : selectedPlan.value === 'monthly' 
        ? '月度VIP开通成功！' 
        : '永久VIP开通成功！',
    type: 'success',
    duration: 2000,
    customClass: 'custom-message'
  })
  
  // 延迟后返回主页
  setTimeout(() => {
    router.push('/')
  }, 1500)
}

// 返回上一页
const goBack = () => {
  router.back()
}

onMounted(() => {
  startCountdown()
})

onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
})
</script>

<style scoped>
.vip-page {
  height: 100vh;
  background: linear-gradient(135deg, #3d3878 0%, #1a1732 100%);
  color: white;
  padding: 0;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  overflow-y: auto;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  background: rgba(61, 56, 120, 0.9);
  backdrop-filter: blur(10px);
  z-index: 100;
  position: sticky;
  top: 0;
}

.back-btn {
  font-size: 20px;
  color: white;
  cursor: pointer;
  padding: 8px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}

.placeholder {
  width: 36px;
}

/* VIP选项样式 */
.vip-options {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vip-option {
  background: rgba(61, 56, 90, 0.95);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.vip-option:hover {
  border: 1px solid rgba(139, 92, 246, 0.4);
}

/* 选中状态的VIP选项 */
.vip-option.selected {
  background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
  border: none;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

.option-left {
  font-size: 18px;
  font-weight: 600;
}

.option-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 32px;
}

.price {
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.original-price {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: line-through;
}

.special-tag {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 2;
}

.special-icon {
  height: 24px;
  width: auto;
}

.price-tag {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #FF4081;
  color: white;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.radio-btn {
  position: absolute;
  right: 20px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-btn.selected {
  border: none;
}

.selected-icon {
  width: 24px;
  height: 24px;
}

/* 倒计时提示 */
.countdown-notice {
  text-align: center;
  color: #FF4081;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* VIP权益样式 */
.vip-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 20px;
}

.benefit-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.benefit-icon {
  width: 32px;
  height: 32px;
}

.benefit-icon img {
  width: 100%;
  height: 100%;
}

.benefit-text {
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.benefit-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* 订阅按钮 */
.subscribe-button-container {
  padding: 24px 20px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.subscribe-button {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  border: none;
  border-radius: 24px;
  color: white;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}

.subscribe-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.terms {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.terms a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

/* 自定义消息提示样式 */
:global(.custom-message) {
  background-color: rgba(45, 56, 120, 0.95) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  color: white !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  font-size: 16px !important;
  padding: 12px 20px !important;
  min-width: 120px !important;
  text-align: center !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999 !important;
}

:global(.custom-message .el-message__icon) {
  color: #8B5CF6 !important;
}
</style> 